<template>
  <div id="App">
    <!--ref获取DOM元素-->
    <div ref="h2Element">我是div元素</div>
    <!--ref获取组件实例-->
    <tao-head ref="component"></tao-head>
    <button @click="btnClick">按钮</button>
  </div>
</template>
<script>
import TaoHead from "@/components/tao-head.vue";

export default {
  name: "App",
  components: {TaoHead},
  data() {
    return {}
  },
  methods: {
    btnClick() {
      console.log(this.$refs.h2Element)
      console.log(this.$refs.component)
      // 拿到组件实例的模板
      console.log(this.$refs.component.$el)
      // 调用组件实例的方法(父组件调用子组件的方法)
      this.$refs.component.changeCount(10)
      //获取父组件
      console.log(this.$refs.component.$parent)
      //获取根组件
      console.log(this.$refs.component.$root)
    }
  }
}
</script>
<style lang="less">

</style>
